<template>
    <div>
        <button v-for="(item, index) in tabs" :key="item"
                @click="itemClick(item)"
                :class="{active: currentTab === item}">
            {{item}}
        </button>

        <!-- 动态组件 -->
        <!-- 动态组件传递数据 -->
        <!-- :age=18 这样写18就会是一个number类型 -->
        <keep-alive include="home,about">
            <component :is="currentTab"
            name="leon"
            :age="18"
            @pageClick="pageClick"></component>

        </keep-alive>

        <!-- v-if判断来实现  -->
        <!-- <template v-if="currentTab === 'home'">
            <home></home>
        </template>

        <template v-else-if="currentTab === 'about'">
            <about></about>
        </template>

        <template v-else>
            <category></category>
        </template> -->
    </div>
</template>

<script>
    import Home from './pages/Home.vue';
    import About from './pages/About.vue';
    import Category from './pages/Category.vue';

    export default {
        components: {
            Home,
            About,
            Category
        },
        data() {
            return {
                tabs: ['home', 'about', 'category'],
                currentTab: 'home'
            }
        },
        methods: {
            itemClick(item) {
                this.currentTab = item;
            },
            pageClick() {
                console.log('page内部发生了点击');
            }
        }
    }
</script>

<style scoped>
    .active {
        color: red;
    }
</style>